<template>
    <div class="questionBank">
        <div class="tabsBox">
            <div class="tabsItem" :class="{ tabsItemed: tabsCurrindex == 0 }" @click="handleTabsCurrindex(0)">
                <div>
                    题单
                </div>
                <div v-if="tabsCurrindex == 0" class="heng"></div>
            </div>
            <div class="tabsItem" :class="{ tabsItemed: tabsCurrindex == 1 }" @click="handleTabsCurrindex(1)">
                <div>
                    大题
                </div>
                <div v-if="tabsCurrindex == 1" class="heng"></div>
            </div>
        </div>

        <div class="">

        </div>
        <RouterView></RouterView>
    </div>
</template>
<script>
import { RouterView } from 'vue-router';
import checklist from "./checklist/index"

export default {
    components: { RouterView, checklist },
    data() {
        return {
            tabsCurrindex: 0,
        };
    },
    created() {
    },
    methods: {
        handleTabsCurrindex(index) {
            this.tabsCurrindex = index
        },
    },
}
</script>
<style scoped lang="scss">
.questionBank {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;

    .tabsBox {
        width: 100%;
        height: 72px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        padding: 16px;
        box-sizing: border-box;
        display: flex;

        .tabsItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #535D6D;
            line-height: 19px;
            margin-right: 50px;
            cursor: pointer;

            .heng {
                width: 24px;
                height: 2px;
                background: #4BA840;
                border-radius: 8px 8px 8px 8px;
                margin-top: 7px;
            }
        }

        .tabsItemed {
            font-family: PingFang SC, PingFang SC;
            font-weight: 550;
            font-size: 16px;
            color: #4BA840;
        }

    }
}
</style>